<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" name="referrer" content="no-referrer">

    <title>springboot项目WebSocket测试demo</title>
    　
    <script src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1-edb203c114.10.2.js"></script>
    <style>
        #top {
            width: 1406px;
            height: 40px;
            float: top;
            background-color: black;
            color: white;
        }

        .group {
            width: 1200px;
            height: 850px;
            border: #edefec solid 2px;
            float: left;
        }

        .message {
            width: 1200px;
            height: 620px;

            overflow: auto;
        }

        .duihuakuang {
            width: 350px;
            height: auto;
            min-height: 60px;
            display: block;
            overflow: auto;
        }

        .imgborder {
            width: 50px;
            height: 50px;
            float: left;
            overflow: hidden;
            border-radius: 50%;

        }

        .imgborder > img {
            width: 100%;
            height: auto;
        }

        .imgbox {
            max-width: 220px;
        }

        .imgbox > img {
            width: 100%;
            height: auto;
        }

        .QQname {

            float: left;
            width: 300px;
            height: 18px;
            font-size: 10px;
        }

        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        li {
            float: left;
            padding: 0;
            margin: 0;
        }

        .msg {
            max-width: 230px;
            min-height: 20px;
            min-width: 30px;
            word-wrap: break-word;
            float: left;
            font-size: 13px;
            background-color: #e5e5e5;
            border-radius: 10px;
            padding: 5px;
            margin-left: 5px;
            margin-top: 4px;

        }

        .side {
            width: 200px;
            height: 850px;
            border: #edefec solid 2px;
            border-right-style: none;
            float: left;
        }

        .side > ul > li {
            width: 200px;
            height: 60px;

        }

        .side > ul > li:hover {
            background-color: #ebebeb;
        }

        .groupname {
            width: 140px;
            height: 60px;
            line-height: 60px;
            float: left;
            white-space: nowrap; /*内容超宽后禁止换行显示*/
            overflow: hidden; /*超出部分隐藏*/
            text-overflow: ellipsis; /*文字超出部分以省略号显示*/
        }

        .dialog {
            width: 1200px;
            border-top: #edefec solid 2px;
        }

        textarea {
            resize: none;
            border: none;

        }

        .sendmsg {
            width: 90px;
            height: 30px;
            font-size: 10px;
            float: right;
            background-color: black;
            color: white;
            margin-right: 10px;
        }

        .sendmsg:hover {
            background-color: #97989a;
        }

        .box {
            width: 5px;
            height: 60px;
            float: left;
        }

        #message {
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
<div>
    <div id="top">
        <div id="message"></div>
    </div>

    <div class="side" id="side">
        <ul>
            <li th:each="group:${grouplist}" th:title="${group.groupName+'('+group.groupCode+')'}"
                th:onclick="getName([[${group.groupCode}]]);" th:id="${'side'+group.groupCode}">
                <div class="box"></div>
                <div class="imgborder">
                    <img th:src="${group.headUrl}" alt="头像">
                </div>
                <div class="groupname" th:text="${group.groupName+'('+group.groupCode+')'}">
                    1
                </div>

            </li>


        </ul>
    </div>

    <div class="group">

        <div class="message">


        </div>
        <div class="dialog">
            <form action="" onsubmit="return false;">
                <textarea name="" cols="168" rows="10"></textarea>
            </form>
        </div>
    </div>

    <div th:each="group:${grouplist}" class="group" th:id="'group'+${group.groupCode}" style="display: none;">

        <div th:id="'g'+${group.groupCode}" class="message">


        </div>
        <div class="dialog">
            <form action="" onsubmit="return false;">
                <textarea name="" cols="168" rows="12"></textarea>
                <button class="sendmsg" th:onclick="send([[${group.groupCode}]]);">发送测试</button>
            </form>
        </div>
    </div>

</div>


<script th:inline="javascript">

    var msgList = [[${msglist}]];
    var jsarr = JSON.parse(msgList);

    for (var i = 0; i < jsarr.length; i++) {
        setMessageInHtml(jsarr[i]);

    }


    var websocket = null;
    if ('WebSocket' in window) {
         websocket = new WebSocket("ws://139.9.115.15:8080//websocket/1");
       /* websocket = new WebSocket("ws://127.0.0.1:8080//websocket/1");*/
    } else {
        alert("您的浏览器不支持websocket");
    }
    websocket.onerror = function () {
        document.getElementById('message').innerHTML += "连接失败！<br> ";
    };
    websocket.onopen = function () {
        document.getElementById('message').innerHTML += "连接成功！<br> ";
        heartCheck.start();

    };
    websocket.onmessage = function (event) {

        if (JSON.parse(event.data.toString()).type == "t10010") {
            heartCheck.reset();
        } else {
            setMessageInHtml(JSON.parse(event.data.toString()));
            /* heartCheck.reset();*/
        }


    };
    websocket.onclose = function () {
        document.getElementById('message').innerHTML += "关闭连接!<br> ";
    };
    window.onbeforeunload = function () {
        clos();
    };

    function setMessageInHtml(message) {
        var patt1 = /\,url=(.*)\]/m;
        var patt = /\[CQ\:image\,file=.*\]/m;
        var abc = "" + message.msg + "";
        var match = abc.match(patt1);
        if (match != null) {
            var txt = abc.replace(patt, "<div class=\"imgbox\">\n" +
                "    <img src=\"" + match[1] + "\"\n" +
                "         alt=\"\">\n" +
                "</div>");
            message.msg = txt;
        }


        var a = "#g" + message.groupcode;
        $(a).append("<div class=\"duihuakuang\">\n" +
            "        <input type=\"hidden\" name=\"groupcode\" value=\"" + message.groupcode + "\">\n" +
            "        <input type=\"hidden\" name=\"msgid\" value=\"" + message.msgid + "\">\n" +
            "        <div class=\"imgborder\">\n" +
            "            <img src=\"" + message.QQHeadUrl + "\" alt=\"头像\">\n" +
            "        </div>\n" +
            "        <div class=\"QQname\">\n" +
            "            <ul>\n" +
            "                <li>[" + message.memberPowerType + "]</li>\n" +
            "                <li>" + message.nickname + "</li>\n" +
            "                <li>(" + message.sendercode + ")</li>\n" +
            "            </ul>\n" +
            "        </div>\n" +
            "        <div class=\"msg\">\n" +
            "                    " + message.msg + "\n" +
            "        </div>\n" +
            "    </div>" + "<br>");


        var height = $(a).css("height");
        $(a).scrollLeft(height);
    }

    function clos() {
        websocket.close(3000, "强制关闭");
    }

    function send(code) {
        var i = "#group" + code + " textarea";
        var jsonMsg = {};
        var msg1 = $(i).val();
        console.log(msg1);
        jsonMsg.msg = msg1;
        jsonMsg.groupcode = code;
        jsonMsg.type = "0";
        $(i).val("");
        websocket.send(JSON.stringify(jsonMsg));

    }

    var heartCheck = {
        timeout: 10000,//30秒
        timeoutObj: null,
        reset: function () {//接收成功一次推送，就将心跳检测的倒计时重置为30秒
            clearTimeout(this.timeoutObj);//
            console.log("重置倒计时");
            this.start();
        },
        start: function () {//启动心跳检测机制，设置倒计时30秒一次
            this.timeoutObj = setTimeout(function () {
                var messagess = {};
                messagess.type = "t10010";
                messagess.service = "运行心跳业务一次 ==" + new Date()
                console.log("心跳一次");
                websocket.send(JSON.stringify(messagess));//启动心跳
            }, this.timeout)
        }
        //onopen连接上，就开始start及时，如果在定时时间范围内，onmessage获取到了服务端消息，
        // 就重置reset倒计时，距离上次从后端获取消息30秒后，执行心跳检测，看是不是断了。
    };

</script>
<script>
    function getName(groupCode) {

        $('#side li').css("background-color", "white");
        $(".box").css("background-color", "white");
        var sideid = "#side" + groupCode;
        $(sideid).css("background-color", "#ebebeb");

        var sidebox = "#side" + groupCode + " .box";
        $(sidebox).css("background-color", "black");

        var groupname = sideid + " .groupname";
        var jQuery = $(groupname).text();
        $("#message").text(jQuery);


        var groupcode = "#group" + groupCode;
        if ($(groupcode).length > 0) {
            $('.group').hide();
            $(groupcode).show();
            return;
        }
        $("#side").after(' <div class="group" id="group' + groupCode + '">\n' +
            '        <h3>' + groupCode + '</h3>\n' +
            '        <br/>\n' +

            '\n' +
            '        <div id="g' + groupCode + '" class="message">\n' +
            '        </div>\n' +
            '        <form action=""  onsubmit="return false;">\n' +
            '            <input class="text" type="text"/>\n' +
            '            <button onclick="send(' + groupCode + ')">发送测试</button>\n' +
            '        </form>\n' +
            '    </div>');
        $('.group').hide();
        $(groupcode).show();

        var sideid = "side" + groupCode;
        $(sideid).css("background-color", "#ebebeb")


    }
</script>
</body>
</html>